<template>
  <div class="_fd-tf-col" :style="colStyle">
    <div class="_fd-tf-title">
      {{ label || "" }}
    </div>
    <div class="_fd-tf-con">
      <slot />
    </div>
  </div>
</template>

<script>
import is from "@form-create/utils/lib/type";
import { defineComponent } from "vue";

export default defineComponent({
  name: "TableFormColumnView",
  props: {
    label: String,
    width: [Number, String],
    color: String,
  },
  computed: {
    colStyle() {
      const w = this.width;
      const style = {
        width: is.Number(w) ? `${w}px` : !w || w === "auto" ? "180px" : w,
      };
      if (this.color) {
        style.color = this.color;
      }
      return style;
    },
  },
  data() {
    return {};
  },
});
</script>

<style>
._fd-tf-col ._fd-tf-con .a-form-item {
  margin-bottom: 1px;
}

._fd-tf-col {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 180px;
  flex-shrink: 0;
}

._fd-tf-con {
  display: flex;
  flex: 1;
  width: 100%;
}

._fd-tf-con .a-form-item-content {
  display: flex;
  margin-left: 0 !important;
  width: 100% !important;
}

._fd-tf-title {
  display: flex;
  height: 40px;
  width: 100% !important;
  border-bottom: 1px solid #ebeef5;
  align-items: center;
  margin-bottom: 0;
  padding-left: 5px;
}

._fd-tf-con .arco-form-item-label {
  display: none !important;
}

._fd-tf-con ._fc-l-item {
  display: flex;
  width: 100%;
  flex-shrink: 0;
}

._fd-tf-con .arco-form-item-label-col {
  flex: 0 !important;
}

._fd-tf-con .arco-form-item-layout-inline {
  margin-right: 0 !important;
}

._fd-tf-con ._fc-l-item > * {
  display: none !important;
}

._fd-tf-con .a-input-number,
._fd-tf-con .a-select,
._fd-tf-con .a-slider,
._fd-tf-con .a-cascader,
._fd-tf-con .a-date-editor {
  width: 100%;
}
._fd-tf-con .arco-form-item-label-col {
  padding-right: 0;
  margin-bottom: 0;
}

._fd-tf-con .arco-form-item {
  margin-bottom: 0 !important;
}
</style>
